<template>
  <div class="dashboard-container">
    <!-- 头部标题区域 -->
    <div class="dashboard-header">
      <h1 class="dashboard-title">校园社团数据可视化大屏</h1>
      <div class="dashboard-time">{{ currentTime }}</div>
    </div>

    <!-- 第一行：关键指标 -->
    <el-row :gutter="20" class="mb20">
      <el-col :span="6">
        <div class="data-card summary-card">
          <div class="summary-icon bg-blue">
            <i class="el-icon-user-solid"></i>
          </div>
          <div class="summary-content">
            <div class="summary-value">126</div>
            <div class="summary-label">社团总数</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="data-card summary-card">
          <div class="summary-icon bg-green">
            <i class="el-icon-user"></i>
          </div>
          <div class="summary-content">
            <div class="summary-value">3,456</div>
            <div class="summary-label">成员总数</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="data-card summary-card">
          <div class="summary-icon bg-yellow">
            <i class="el-icon-star-on"></i>
          </div>
          <div class="summary-content">
            <div class="summary-value">98</div>
            <div class="summary-label">活跃社团</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="data-card summary-card">
          <div class="summary-icon bg-red">
            <i class="el-icon-trophy"></i>
          </div>
          <div class="summary-content">
            <div class="summary-value">87%</div>
            <div class="summary-label">活动完成率</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 第二行：主要图表 -->
    <el-row :gutter="20" class="mb20">
      <el-col :span="12">
        <div class="data-card chart-card">
          <div class="card-header">
            <i class="el-icon-pie-chart chart-icon"></i>
            <span class="chart-title">社团数量分布</span>
          </div>
          <div ref="pieChart" class="chart-container"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="data-card chart-card">
          <div class="card-header">
            <i class="el-icon-data-line chart-icon"></i>
            <span class="chart-title">社团成员增长趋势</span>
          </div>
          <div ref="lineChart" class="chart-container"></div>
        </div>
      </el-col>
    </el-row>

    <!-- 第三行：更多图表 -->
    <el-row :gutter="20" class="mb20">
      <el-col :span="12">
        <div class="data-card chart-card">
          <div class="card-header">
            <i class="el-icon-monitor chart-icon"></i>
            <span class="chart-title">社团活跃度雷达图</span>
          </div>
          <div ref="radarChart" class="chart-container"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="data-card chart-card">
          <div class="card-header">
            <i class="el-icon-data-analysis chart-icon"></i>
            <span class="chart-title">社团类别活跃度</span>
          </div>
          <div ref="barChart" class="chart-container"></div>
        </div>
      </el-col>
    </el-row>

    <!-- 第四行：仪表盘 -->
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="data-card chart-card">
          <div class="card-header">
            <i class="el-icon-help chart-icon"></i>
            <span class="chart-title">社团发展指数</span>
          </div>
          <div ref="gaugeChart" class="chart-container"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'Statistics',
  data() {
    return {
      pieChart: null,
      lineChart: null,
      radarChart: null,
      barChart: null,
      gaugeChart: null,
      timer: null,
      currentTime: ''
    }
  },
  mounted() {
    this.initCharts()
    this.updateTime()
    this.timer = setInterval(() => {
      this.updateTime()
    }, 1000)
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
    if (this.pieChart) {
      this.pieChart.dispose()
    }
    if (this.lineChart) {
      this.lineChart.dispose()
    }
    if (this.radarChart) {
      this.radarChart.dispose()
    }
    if (this.barChart) {
      this.barChart.dispose()
    }
    if (this.gaugeChart) {
      this.gaugeChart.dispose()
    }
  },
  methods: {
    updateTime() {
      const now = new Date()
      this.currentTime = now.toLocaleString('zh-CN', { 
        year: 'numeric', 
        month: '2-digit', 
        day: '2-digit', 
        hour: '2-digit', 
        minute: '2-digit', 
        second: '2-digit',
        hour12: false 
      })
    },
    initCharts() {
      this.initPieChart()
      this.initLineChart()
      this.initRadarChart()
      this.initBarChart()
      this.initGaugeChart()
    },
    initPieChart() {
      this.pieChart = echarts.init(this.$refs.pieChart)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '社团数量',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '18',
                fontWeight: 'bold',
                color: '#fff'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 36, name: '技术类' },
              { value: 22, name: '文艺类' },
              { value: 18, name: '体育类' },
              { value: 12, name: '学术类' },
              { value: 8, name: '公益类' }
            ]
          }
        ]
      }
      this.pieChart.setOption(option)
    },
    initLineChart() {
      this.lineChart = echarts.init(this.$refs.lineChart)
      const option = {
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLabel: {
            color: '#fff'
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '成员数量',
            type: 'line',
            smooth: true,
            lineStyle: {
              width: 3
            },
            areaStyle: {
              opacity: 0.3
            },
            emphasis: {
              focus: 'series'
            },
            data: [120, 132, 101, 134, 90, 230, 210]
          }
        ]
      }
      this.lineChart.setOption(option)
    },
    initRadarChart() {
      this.radarChart = echarts.init(this.$refs.radarChart)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        radar: {
          radius: '60%',
          splitNumber: 8,
          indicator: [
            { name: '活动频率', max: 100 },
            { name: '成员参与度', max: 100 },
            { name: '社交媒体活跃', max: 100 },
            { name: '项目完成率', max: 100 },
            { name: '新成员增长率', max: 100 }
          ],
          axisName: {
            color: '#fff'
          }
        },
        series: [{
          name: '社团活跃度',
          type: 'radar',
          lineStyle: {
            width: 2
          },
          data: [
            {
              value: [90, 80, 85, 75, 95],
              name: '技术类社团',
              itemStyle: {
                color: '#5470c6'
              }
            },
            {
              value: [75, 90, 95, 80, 70],
              name: '文艺类社团',
              itemStyle: {
                color: '#91cc75'
              }
            },
            {
              value: [85, 95, 70, 85, 80],
              name: '体育类社团',
              itemStyle: {
                color: '#fac858'
              }
            }
          ]
        }]
      }
      this.radarChart.setOption(option)
    },
    initBarChart() {
      this.barChart = echarts.init(this.$refs.barChart)
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['技术类', '文艺类', '体育类', '学术类', '公益类'],
            axisTick: {
              alignWithLabel: true
            },
            axisLabel: {
              color: '#fff'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              color: '#fff'
            }
          }
        ],
        series: [
          {
            name: '活跃度',
            type: 'bar',
            barWidth: '60%',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' }
              ])
            },
            emphasis: {
              itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#2378f7' },
                  { offset: 0.7, color: '#2378f7' },
                  { offset: 1, color: '#83bff6' }
                ])
              }
            },
            data: [92, 85, 78, 65, 70]
          }
        ]
      }
      this.barChart.setOption(option)
    },
    initGaugeChart() {
      this.gaugeChart = echarts.init(this.$refs.gaugeChart)
      const option = {
        series: [
          {
            type: 'gauge',
            center: ['50%', '60%'],
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 100,
            splitNumber: 5,
            itemStyle: {
              color: '#FFAB91'
            },
            progress: {
              show: true,
              width: 30
            },
            pointer: {
              show: false
            },
            axisLine: {
              lineStyle: {
                width: 30
              }
            },
            axisTick: {
              distance: -45,
              splitNumber: 5,
              lineStyle: {
                width: 2,
                color: '#999'
              }
            },
            splitLine: {
              distance: -52,
              length: 14,
              lineStyle: {
                width: 3,
                color: '#999'
              }
            },
            axisLabel: {
              distance: -20,
              color: '#999',
              fontSize: 12
            },
            anchor: {
              show: false
            },
            title: {
              show: false
            },
            detail: {
              valueAnimation: true,
              width: '60%',
              lineHeight: 40,
              borderRadius: 8,
              offsetCenter: [0, '-15%'],
              fontSize: 32,
              fontWeight: 'bolder',
              formatter: '{value}%',
              color: '#fff'
            },
            data: [
              {
                value: 75
              }
            ]
          },
          {
            type: 'gauge',
            center: ['50%', '60%'],
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 100,
            itemStyle: {
              color: '#FD7347'
            },
            progress: {
              show: true,
              width: 8
            },
            pointer: {
              show: true,
              offsetCenter: [0, '-55%'],
              length: '100%',
              icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
              itemStyle: {
                color: 'inherit'
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            detail: {
              show: false
            },
            data: [
              {
                value: 75
              }
            ]
          }
        ]
      }
      this.gaugeChart.setOption(option)
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
  background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
  min-height: 100vh;
  color: #fff;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.dashboard-title {
  font-size: 32px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.dashboard-time {
  font-size: 18px;
  color: #409EFF;
}

.mb20 {
  margin-bottom: 20px;
}

.data-card {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  height: 100%;
}

.data-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.summary-card {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  display: flex;
  padding: 20px;
}

.summary-icon {
  width: 70px;
  height: 70px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  margin-right: 20px;
}

.bg-blue {
  background: linear-gradient(135deg, #409EFF, #2d8cf0);
}

.bg-green {
  background: linear-gradient(135deg, #19be6b, #2dca73);
}

.bg-yellow {
  background: linear-gradient(135deg, #ff9900, #ffad33);
}

.bg-red {
  background: linear-gradient(135deg, #ed4014, #f16649);
}

.summary-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.summary-value {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 5px;
}

.summary-label {
  font-size: 14px;
  color: #ccc;
}

.chart-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
}

.card-header {
  padding: 15px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.chart-icon {
  font-size: 20px;
  color: #409EFF;
  margin-right: 8px;
}

.chart-title {
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.chart-container {
  width: 100%;
  height: 400px;
  padding: 10px;
}
</style>